<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avatar_box"><img src="../assets/logo.png" /></div>

			<!-- 表单登录区域 -->
			<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="40px" class="login_form">
				<el-form-item prop="username"><el-input v-model="loginForm.username" placeholder="请输入用户名" suffix-icon="el-icon-user"></el-input></el-form-item>
				<el-form-item prop="password"><el-input v-model="loginForm.password" placeholder="请输入密码" suffix-icon="el-icon-key" type="password"></el-input></el-form-item>
				<el-form class="btns">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" @click="resetLoginForm">重置</el-button>
				</el-form>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			//登录表单的数据绑定对象
			loginForm: {
				username: '',
				password: ''
			},

			//表单验证规则对象
			loginFormRules: {
				//验证用户名是否合法
				username: [
					{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					},
					{
						min: 3,
						max: 10,
						message: '长度在 3 到 10 个字符',
						trigger: 'blur'
					}
				],
				//验证密码是否合法
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 15,
						message: '长度在 6 到 15 个字符',
						trigger: 'blur'
					}
				]
			}
		};
	},
	methods: {
		//重置登录表单
		resetLoginForm() {
			// console.log(this)
			this.$refs.loginFormRef.resetFields();
		},
		login() {
			this.$refs.loginFormRef.validate(async valid => {
				// console.log(valid);
				if (!valid) return;
				const { data: res } = await this.$http.post('login', this.loginForm);
				// console.log(res);
				if (res.meta.status !== 200) return this.$message.error('登录失败');
				this.$message.success('登录成功');
				/*
						1. 将登录之后的token保存到客户端的sessionStorage中
							1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问。
							1.2 token只应当在当前网站打开期间生效，所以将token保存在sessionStorage中
						2. 通过编程式导航跳转到后台主页，路由地址是/home
					*/
				window.sessionStorage.setItem('token', res.data.token);
				this.$router.push('/home');
			});
		},
		keyDown(e) {
			if(e.keyCode == 13) {
				this.login();
			}
		}
	},
	mounted() {
		window.addEventListener('keydown', this.keyDown)
	}
};
</script>

<style lang="less" scoped>
.login_container {
	background-color: #2b4b6b;
	height: 100%;
}

.login_box {
	width: 450px;
	height: 300px;
	background-color: #fff;
	border-radius: 0.1875rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	.avatar_box {
		height: 130px;
		width: 130px;
		border: 1px solid #eee;
		border-radius: 50%;
		padding: 10px;
		box-shadow: 0 0 10px #ddd;
		position: absolute;
		left: 50%;
		background-color: #fff;

		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #eee;
		}

		transform: translate(-50%, -50%);
	}
}

.btns {
	display: flex;
	justify-content: flex-end;
}

.login_form {
	position: absolute;
	bottom: 10%;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}
</style>
